<script setup>
import { onMounted, reactive, ref } from "vue";
import { getSong } from "./api/api";
import {storeToRefs} from 'pinia'
import {useCounter} from './store/index'
import Chart from './components/Chart.vue'
import barchart from './charts/barChartOption'
const useCounterStrore = useCounter()
const {count} = storeToRefs(useCounterStrore)
const {add,subtrac}=useCounterStrore
 
const myaudio =ref(null)
const state = reactive({data:''})
const gethandlle =()=>{
  myaudio.value.src = state.data.data.data[0].url

}

onMounted( async()=>{
  state.data = await getSong()

})
</script>

<template>
  <div>
    <div>
<Chart :options="barchart()" class="chart"/>
    </div>
  <h1>{{count}}</h1>
 <div>
  <button @click="add">+</button><button @click="subtrac">-</button>
 </div>
      <audio ref="myaudio" controls autoplay ></audio>
    

    <h1>获取歌曲列表</h1>
    <button @click="gethandlle">点击获取</button>
  </div>
</template>

<style scoped>
.chart{
  width: 800px;
  height: 300px;
}


</style>
